<template>
  <div
    id="container"
    v-loading="loading"
    @mouseover="baiduMapOutBox"
    @mouseout="baiduMapOverBox"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <baidu-map
      class="map"
      ak="DbvAihBlBqf6rh0OncEOxvaEYqyCC3cc"
      @ready="handler"
      :center="location"
      :zoom="current_zoom"
      :min-zoom="5"
      :max-zoom="20"
    >
      <div v-if="isprovinOnly">
        <bm-boundary
          :name="oneProvince"
          :strokeWeight="4"
          strokeColor="#ff4700"
          fillColor="#0f1f40"
          :fillOpacity="0.1"
        ></bm-boundary>
      </div>
      <div>
        <bm-marker
          v-for="(marker, index) in markers"
          :key="index"
          v-show="marker.fIsOnline == 0 && isLixian"
          :icon="{
            url: require('../../../assets/image/lixian.png'),
            size: { width: 32, height: 32 }
          }"
          :position="{ lng: marker.position.lng, lat: marker.position.lat }"
          :zIndex="999"
          @click="getLocationPoint(marker.position, index)"
          @dblclick="renderLevelTwoMapdd"
        ></bm-marker>
        <bm-marker
          v-for="(marker, index) in markers"
          :key="marker.position.lng"
          v-show="marker.fIsOnline == 1"
          :icon="{
            url: require('../../../assets/image/zaixian.png'),
            size: { width: 32, height: 32 }
          }"
          :position="{ lng: marker.position.lng, lat: marker.position.lat }"
          :zIndex="999"
          @click="getLocationPoint(marker.position, index)"
          @dblclick="renderLevelTwoMapdd"
        ></bm-marker>
      </div>
      <bm-info-window
        v-if="isShow"
        :position="points"
        :offset="{ width: 0, height: -10 }"
        :show="show"
        @close="infoWindowClose"
        @open="infoWindowOpen"
      >
        <p>{{ this.named }}：{{ this.nameAddress }}</p>
        <p>设备数量：{{ zongshu }}</p>
        <p>在线：{{ zaixian }}</p>
        <p>离线：{{ zongshu - zaixian }}</p>
        <p>设备号：{{ markers[indexs].fNumber }}</p>
        <p>设备状态：{{ markers[indexs].fIsOnline == 1 ? '在线' : '离线' }}</p>
      </bm-info-window>
    </baidu-map>
    <!-- 部门设备列表 -->
    <div
      class="tools"
      :class="{ active: isUnfold }"
      @mouseover="baiduMapOver"
      @mouseout="baiduMapOut"
    >
      <div class="head">
        <!-- radio -->
        <div class="top">
          <!-- 单选 -->
          <span style="margin: 0 10px;font-weight: 700;">设备列表</span>
          <el-radio-group v-model="radio2" @change="checkedsDev">
            <el-radio label="1"
              ><span style="font-size: 12px;"
                >全部({{ allDev }})</span
              ></el-radio
            >
            <el-radio label="2" style="margin-left: 10px;">
              <span style="font-size: 12px;">在线({{ activeDev }})</span>
            </el-radio>
          </el-radio-group>
          <!-- 展开icon -->
          <span class="unfold" @click="Unfold" style="right: 3px;top:-2px;">
            <i v-if="isUnfold" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </span>
        </div>
        <div class="mytree">
          <div style="padding: 5px 10px;height: 400px;">
            <el-input
              style="margin-bottom: 10px;"
              placeholder="设备筛选"
              v-model="filterText"
            >
            </el-input>
            <!-- 树形控件 设备 -->
            <el-scrollbar style="height:39vh;background-color: #FFFFFF;">
              <el-tree
                :data="cardList"
                show-checkbox
                node-key="id"
                ref="tree2"
                accordion
                :default-expanded-keys="expandedKeys"
                :expand-on-click-node="false"
                :check-on-click-node="true"
                highlight-current
                :filter-node-method="filterNodes"
                :props="defaultPropsd"
                :render-content="renderContent"
              >
              </el-tree>
            </el-scrollbar>
          </div>
          <el-button type="primary" @click="getProgram">选择节目</el-button>
          <el-button type="primary" @click="sendProgram"
            >发送节目(列表)</el-button
          >
        </div>
      </div>
    </div>

    <div
      class="programBox"
      :class="{ active: isprogramShow }"
      @mouseover="baiduMapOver"
      @mouseout="baiduMapOut"
    >
      <div class="devList-top">
        <span
          >节目列表
          <span style="font-size: 13px;color: orangered;"
            >(发布广告请先在此选择节目)</span
          ></span
        >
        <el-button
          type="primary"
          @click="sendProgramTwo"
          style="padding: 6px 20px;margin-left: 30px;margin-top:-2px;"
          >发送节目(地图)
        </el-button>
      </div>
      <div class="program-top">
        <div
          @click="programShow"
          style="position: absolute;top:6px;right:0;cursor: pointer;width: 20px;height: 20px;"
        >
          <!-- 展开icon -->
          <span class="unfold">
            <i v-if="isprogramShow" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </span>
        </div>
      </div>
      <el-table
        :data="userList"
        @selection-change="handleSelectionChange"
        border
        ref="multipleTable"
        :row-class-name="tableRowClassName"
        style="width: 100%;height:335px; font-size: 12px;overflow: auto;"
      >
        <el-table-column width="40" type="selection" align="center" />
        <el-table-column
          label="节目ID"
          align="center"
          key="pId"
          prop="pId"
          width="70"
        />
        <el-table-column
          label="节目号"
          align="center"
          key="pNo"
          prop="pNo"
          width="90"
          sortable
        />
        <el-table-column
          label="节目名称"
          align="center"
          key="pTitle"
          prop="pTitle"
          width="80"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="节目类型"
          align="center"
          width="75"
          key="lgCardType.fDescription"
          prop="lgCardType.fDescription"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="所属组织"
          align="center"
          key="deptName"
          prop="sysDept.deptName"
          width="80"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="节目内容"
          align="center"
          key="phonenumber4"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="left-start">
              <p
                v-for="(item, index) in scope.row.lgProgramAreaList"
                :key="index"
                style="margin-top: 5px;border-bottom: 1px solid gray;display: flex;align-items: center;"
              >
                <span style="color:red;font-weight: 700;"
                  >分区{{ index + 1 }}：</span
                >
                <span
                  v-if="item.lgProgramMaterialList[0].mMessage"
                  style="color:dimgray;font-size: 16px;font-weight: 700;"
                >
                  {{ item.lgProgramMaterialList[0].mMessage }}
                </span>
                <span
                  v-for="(items, index) in item.lgProgramMaterialList"
                  :key="index"
                >
                  <span v-if="items.lgFile.fRelativePath">
                    <img :src="items.lgFile.fRelativePath" alt="" />
                  </span>
                </span>
              </p>
              <div
                slot="reference"
                class="name-wrapper"
                style="cursor: pointer;"
              >
                <el-tag size="medium">查看内容</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getProgramList"
        style="background-color: #fff;height: 50px;"
      />
    </div>

    <div
      id="deviceBox"
      :class="{ active: !isDevice }"
      @mouseover="baiduMapOver"
      @mouseout="baiduMapOut"
    >
      <div class="topDevice">
        <span>各省份设备数量</span>|
        <span
          >当前范围：
          <el-radio-group v-model="radio" @change="checkeds">
            <el-radio label="1" style="margin-left:10px;"
              ><span style="color:gray;font-size:12px;margin-left: -15px;"
                >总数({{ zongshu }})</span
              ></el-radio
            >
            <el-radio label="2" style="margin-left:20px;"
              ><span style="color:gray;font-size:12px;margin-left: -15px;"
                >在线({{ zaixian }})</span
              ></el-radio
            >
          </el-radio-group>
        </span>
        <div
          @click="deviceShow"
          style="position: absolute;top:3px;right:-10px;cursor: pointer;width: 20px;height: 20px;"
        >
          <span class="unfold">
            <i v-if="isDevice" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </span>
        </div>
      </div>
      <div class="centerDevice">
        <!-- v-if="leftButton" -->
        <ul>
          <li
            v-for="(item, index) in proName"
            :class="{ active: isPro == index }"
            :key="index"
            @click="provBth(item, index)"
          >
            <span class="provBox">{{ item }}:</span>
            <span>{{ proNum[index] }}</span>
          </li>
        </ul>
      </div>
      <div class="bottomDevice">
        <span>根据半径选择设备：</span>
        <i
          v-for="(item, index) in gpsKm"
          :class="{ activeBgc: gps == index }"
          :key="item.values"
          @click="gpsBtn(index)"
          >{{ item.kms }}</i
        >
        <el-checkbox
          v-model="isCheckedDev"
          size="small"
          border
          @change="checkAllDevice"
          style="margin-left: 10px;border: 1px solid dimgray;background-color:#676f92;color: #fff;"
          >选择所有设备
        </el-checkbox>
      </div>
      <!-- <div style="display: flex;justify-content: space-between;width: 85%;"> -->
      <!-- <el-checkbox v-model="isCheckedDev" size="small" border @change="checkAllDevice"
					style="margin-left: 10px;border: 1px solid dimgray;background-color:#676f92;color: #fff;">选择所有设备
				</el-checkbox> -->
      <!-- <el-button type="primary" @click="sendProgramTwo" style='padding: 8px 30px;margin-left: 40px;'>发送节目(地图)
				</el-button> -->
      <!-- </div> -->
    </div>
    <div
      class="checkedDevList"
      :class="{ active: devList }"
      @mouseover="baiduMapOver"
      @mouseout="baiduMapOut"
    >
      <div
        @click="devListShow"
        style="position: absolute;top:5px;right:0;cursor: pointer;width: 20px;height: 20px;"
      >
        <span class="unfold">
          <i v-if="!devList" class="el-icon-arrow-down"></i>
          <i v-else class="el-icon-arrow-up"></i>
        </span>
      </div>
      <div style="position: absolute;top:5px;left:140px;">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          style="color: #ffffff;"
          >全选</el-checkbox
        >
        <span style="color: #ffffff;margin-left: 10px;"
          >选中设备数：(
          <i style="color: #e3c814;font-size: 14px;font-weight: 700;">{{
            checkedCities.length
          }}</i>
          )</span
        >
      </div>
      <p
        style="background-color: #3d3d3d;color:#fff;font-size:13px;padding: 8px;15px"
      >
        查看地图选中设备号
      </p>
      <p
        v-if="circlesendDev.cardList.length == 0"
        style="margin-top: 50px;margin-left: 150px;color: #fff;font-weight: 700;"
      >
        暂无选择设备
      </p>
      <el-checkbox-group
        v-else
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="(item, index) in circlesendDev.cardList"
          :label="item"
          :key="index"
          :class="{ activeZaixian: isDevfIsOnline[index] == 1 }"
          >{{ item }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmBoundary from 'vue-baidu-map/components/others/Boundary'
import { BmlMarkerClusterer } from 'vue-baidu-map'
import BmCircle from 'vue-baidu-map/components/overlays/Circle'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmControl from 'vue-baidu-map/components/controls/Control.vue'
import '@/utils/BMapLib/GeoUtils.js'
import {
  mapMarker,
  getDev,
  treeselects,
  programs,
  programsSend
} from '@/api/system/map'
import Treeselect from '@riophae/vue-treeselect'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Distribution',
  components: {
    BaiduMap,
    BmBoundary,
    BmlMarkerClusterer,
    BmControl,
    Treeselect,
    BmCircle,
    BmMarker,
    BmInfoWindow
  },
  data () {
    return {
      isPro: -1,
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      isCheckedDev: false,
      devList: true,
      allDev: 0,
      activeDev: 0,
      // 查询节目·······
      // 遮罩层
      loading: true,
      userList: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      isShows: true,
      // 总条数
      total: 0,
      // 选中数组
      ids: [],
      cards: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      sendShow: true,
      // 所有GPS数据·······
      allGpsData: [],
      indexs: undefined,
      isShow: false,
      circleShow: false,
      isMarkerShow: true,
      isprogramShow: true,
      circlesendDev: {
        cardList: [],
        idList: [],
        command: 193
      },
      location: {
        lng: 116,
        lat: 39
      },
      // 部门列表······
      cardList: undefined,
      filterText: '',
      expandedKeys: [], //默认打开的节点
      quer2: {
        deptId: undefined
      },
      defaultPropsd: {
        children: 'children',
        label: 'label'
      },
      sendConfig: {
        cardList: [],
        idList: [],
        command: 193
      },
      form: {
        deptId: undefined
      },
      zaixian: 0,
      zongshu: 0,
      isLixian: true,
      circlePath: {
        center: undefined,
        radius: undefined
      },
      gpsKm: [
        {
          kms: '10KM',
          values: 10000
        },
        {
          kms: '20KM',
          values: 20000
        },
        {
          kms: '30KM',
          values: 30000
        },
        {
          kms: '50KM',
          values: 50000
        }
      ],
      gps: -1,
      radio: '1',
      radio2: '1',
      show: false,
      map: undefined,
      BMap: undefined,
      isDevice: false,
      points: {
        lat: 36.64381774953192,
        lng: 98.1173515174872
      },
      //最小级zoom，省级zoom
      ZOOM_PROVINCE_LEVEL: 5,
      //市级zoom
      ZOOM_CITY_LEVEL: 7,
      //区县级zoom
      ZOOM_DISTRICT_LEVEL: 10,
      //街道级zoom
      ZOOM_STREET_LEVEL: 13,
      //缩放最大级别 zoom
      ZOOM_MAX_LEVEL: 20,
      //当前zoom级别
      current_zoom: 5,
      //事件控制变量
      oneProvince: undefined,
      twoCity: undefined,
      threeDistrict: undefined,
      nameAddress: undefined,
      named: undefined,
      markers: [],
      geo: undefined,
      zoom: 5,
      geocProvince: undefined,
      geocCity: undefined,
      geocDistrict: undefined,
      newAlldata: undefined,
      proName: undefined,
      proNum: undefined,
      proNameArr: [],
      isUnfold: true,
      mapTreeData: [],
      circles: undefined,
      ponArr: [],
      scrolls: true,
      scrolls1: true,
      ssd: undefined,
      isDevfIsOnline: [],
      isDevpanduan: true,
      isprovinAll: false,
      isprovinOnly: false,
      isDevqiehuan: false,
      isSearch: true,
      ply: [],
      ddp: [],
      isCreatWatch: false,
      newMarkerObj: {
        position: undefined,
        fIsOnline: undefined,
        fNumber: undefined,
        deptId: undefined,
        city: undefined,
        province: undefined,
        district: undefined
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val)
      for (let i = 0; i < this.markers.length; i++) {
        if (this.markers[i].fNumber == val) {
          this.getLocationPoint(this.markers[i].position, i)
        }
      }
    },
    cardList: {
      handler () {
        this.cardList.forEach(item => {
          this.expandedKeys.push(item.id)
        })
      },
      deep: true
    },
    // 监听deptId
    // 'form.deptId': 'currDeptChange',
    '$store.state.deptId': {
      handler (newval) {
        this.isprovinAll = false
        if (this.map) {
          this.map.clearOverlays()
          this.drawBoundary()
        }
        this.currDeptChange(newval)
      }
    }
  },
  created () {
    let that = this
    if (this.$store.state.deptId) {
      that.isCreatWatch = true
    } else {
      that.isCreatWatch = false
    }
  },
  methods: {
    // 按省份选择设备
    provBth (item, index) {
      this.isPro = index
      this.isprovinOnly = true
      this.oneProvince = item
      this.current_zoom = 5
      this.circlesendDev.cardList = []
      this.isDevfIsOnline = []
      this.zongshu = 0
      this.zaixian = 0
      for (let i = 0; i < this.markers.length; i++) {
        if (this.markers[i].province == item) {
          this.zongshu++
          if (this.isLixian == true) {
            this.circlesendDev.cardList.push(this.markers[i].fNumber)
            this.isDevfIsOnline.push(this.markers[i].fIsOnline)
          } else {
            if (this.markers[i].fIsOnline == 1) {
              this.circlesendDev.cardList.push(this.markers[i].fNumber)
              this.isDevfIsOnline.push(this.markers[i].fIsOnline)
            }
          }
        }
        if (
          this.markers[i].fIsOnline == 1 &&
          this.markers[i].province == item
        ) {
          this.zaixian++
        }
      }
      this.checkedCities = this.circlesendDev.cardList
      this.checkAll = true
    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.circlesendDev.cardList : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.circlesendDev.cardList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.circlesendDev.cardList.length
    },
    drawBoundary () {
      /*画遮蔽层的相关方法
       *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
       *      这样就做出了一个经过多次西北角的闭合多边形*/
      //定义中国东南西北端点，作为第一层
      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      var pStart = new BMap.Point(180, 90)
      var pEnd = new BMap.Point(0, -90)
      var pArray = [
        new BMap.Point(pStart.lng, pStart.lat),
        new BMap.Point(pEnd.lng, pStart.lat),
        new BMap.Point(pEnd.lng, pEnd.lat),
        new BMap.Point(pStart.lng, pEnd.lat)
      ]

      // 循环添加各闭合区域
      pArray.push(new BMap.Point(135.077218, 48.544352))
      pArray.push(new BMap.Point(134.92218, 48.584352))
      pArray.push(new BMap.Point(134.827218, 48.534352))
      pArray.push(new BMap.Point(134.727669, 48.495377))
      pArray.push(new BMap.Point(134.304531, 48.394091))
      pArray.push(new BMap.Point(133.513447, 48.177476))
      pArray.push(new BMap.Point(132.832747, 48.054205))
      pArray.push(new BMap.Point(132.519993, 47.789172))
      pArray.push(new BMap.Point(131.765704, 47.813962))
      pArray.push(new BMap.Point(131.103402, 47.776772))
      pArray.push(new BMap.Point(130.919429, 48.331824))
      pArray.push(new BMap.Point(130.77225, 48.868729))
      pArray.push(new BMap.Point(129.907577, 49.351849))
      pArray.push(new BMap.Point(128.73015, 49.699156))
      pArray.push(new BMap.Point(127.791888, 49.85404))
      pArray.push(new BMap.Point(127.791888, 50.492084))
      pArray.push(new BMap.Point(126.927215, 51.616759))
      pArray.push(new BMap.Point(126.467283, 52.579818))
      pArray.push(new BMap.Point(125.952158, 53.059077))
      pArray.push(new BMap.Point(124.701142, 53.313247))
      pArray.push(new BMap.Point(123.56051, 53.664362))
      pArray.push(new BMap.Point(121.555204, 53.46722))
      pArray.push(new BMap.Point(120.340983, 53.125528))
      pArray.push(new BMap.Point(119.95464, 52.579818))
      pArray.push(new BMap.Point(120.616942, 52.523746))
      pArray.push(new BMap.Point(120.506559, 52.095236))
      pArray.push(new BMap.Point(119.862653, 51.616759))
      pArray.push(new BMap.Point(119.365926, 50.959196))
      pArray.push(new BMap.Point(119.089967, 50.362806))
      pArray.push(new BMap.Point(119.108364, 50.05583))
      pArray.push(new BMap.Point(118.133307, 49.925357))
      pArray.push(new BMap.Point(117.471005, 49.794528))
      pArray.push(new BMap.Point(116.808702, 49.889712))
      pArray.push(new BMap.Point(116.385564, 49.758785))
      pArray.push(new BMap.Point(115.962426, 48.953617))
      pArray.push(new BMap.Point(115.520891, 48.147476))
      pArray.push(new BMap.Point(115.796851, 47.677465))
      pArray.push(new BMap.Point(116.27518, 47.652609))
      pArray.push(new BMap.Point(117.103059, 47.652609))
      pArray.push(new BMap.Point(118.004526, 47.801568))
      pArray.push(new BMap.Point(118.887596, 47.577968))
      pArray.push(new BMap.Point(119.402721, 47.127871))
      pArray.push(new BMap.Point(119.402721, 46.800397))
      pArray.push(new BMap.Point(118.464459, 46.825659))
      pArray.push(new BMap.Point(117.103059, 46.648575))
      pArray.push(new BMap.Point(115.980824, 46.088213))
      pArray.push(new BMap.Point(115.226534, 45.702829))
      pArray.push(new BMap.Point(114.159491, 45.275796))
      pArray.push(new BMap.Point(112.761297, 45.171782))
      pArray.push(new BMap.Point(111.639061, 45.132727))
      pArray.push(new BMap.Point(111.436691, 44.55683))
      pArray.push(new BMap.Point(111.51028, 44.001703))
      pArray.push(new BMap.Point(110.682402, 43.387647))
      pArray.push(new BMap.Point(108.897864, 42.658724))
      pArray.push(new BMap.Point(106.892559, 42.522781))
      pArray.push(new BMap.Point(103.82021, 42.140555))
      pArray.push(new BMap.Point(102.422016, 42.536389))
      pArray.push(new BMap.Point(101.336575, 42.82146))
      pArray.push(new BMap.Point(99.478448, 42.929712))
      pArray.push(new BMap.Point(97.601924, 42.997272))
      pArray.push(new BMap.Point(96.019756, 43.815487))
      pArray.push(new BMap.Point(92.72664, 45.288784))
      pArray.push(new BMap.Point(91.144473, 45.599605))
      pArray.push(new BMap.Point(91.457227, 46.483616))
      pArray.push(new BMap.Point(90.794924, 47.553064))
      pArray.push(new BMap.Point(89.562305, 48.221295))
      pArray.push(new BMap.Point(88.2377, 48.953617))
      pArray.push(new BMap.Point(87.722576, 49.279683))
      pArray.push(new BMap.Point(87.097067, 49.255604))
      pArray.push(new BMap.Point(86.60034, 49.122957))
      pArray.push(new BMap.Point(86.177203, 48.710696))
      pArray.push(new BMap.Point(85.533297, 48.344091))
      pArray.push(new BMap.Point(85.404516, 47.875888))
      pArray.push(new BMap.Point(85.349324, 47.390897))
      pArray.push(new BMap.Point(84.926186, 47.215692))
      pArray.push(new BMap.Point(83.233635, 47.315881))
      pArray.push(new BMap.Point(82.865689, 47.328391))
      pArray.push(new BMap.Point(82.258578, 45.844449))
      pArray.push(new BMap.Point(82.368962, 45.366651))
      pArray.push(new BMap.Point(82.093003, 45.30177))
      pArray.push(new BMap.Point(80.989165, 45.275796))
      pArray.push(new BMap.Point(79.903724, 45.015402))
      pArray.push(new BMap.Point(80.326862, 44.332772))
      pArray.push(new BMap.Point(80.510835, 43.642047))
      pArray.push(new BMap.Point(80.621219, 43.186043))
      pArray.push(new BMap.Point(80.27167, 43.010775))
      pArray.push(new BMap.Point(79.885327, 42.304653))
      pArray.push(new BMap.Point(79.259819, 41.838593))
      pArray.push(new BMap.Point(78.487133, 41.576647))
      pArray.push(new BMap.Point(77.916816, 41.341363))
      pArray.push(new BMap.Point(77.272911, 41.16086))
      pArray.push(new BMap.Point(76.739389, 41.02167))
      pArray.push(new BMap.Point(76.26106, 40.546202))
      pArray.push(new BMap.Point(75.672346, 40.75639))
      pArray.push(new BMap.Point(74.881262, 40.630357))
      pArray.push(new BMap.Point(74.255754, 40.293095))
      pArray.push(new BMap.Point(73.777425, 39.939968))
      pArray.push(new BMap.Point(73.74063, 39.556517))
      pArray.push(new BMap.Point(73.53826, 39.34256))
      pArray.push(new BMap.Point(73.685438, 38.725549))
      pArray.push(new BMap.Point(74.034987, 38.407771))
      pArray.push(new BMap.Point(74.458125, 38.335352))
      pArray.push(new BMap.Point(74.734084, 38.074036))
      pArray.push(new BMap.Point(74.844468, 37.577865))
      pArray.push(new BMap.Point(74.678892, 37.21089))
      pArray.push(new BMap.Point(74.6237, 36.975076))
      pArray.push(new BMap.Point(75.414784, 36.501232))
      pArray.push(new BMap.Point(75.801127, 35.934721))
      pArray.push(new BMap.Point(76.518622, 35.379154))
      pArray.push(new BMap.Point(77.309706, 35.137703))
      pArray.push(new BMap.Point(77.972008, 34.758986))
      pArray.push(new BMap.Point(78.376749, 34.241106))
      pArray.push(new BMap.Point(78.523927, 33.473647))
      pArray.push(new BMap.Point(78.7079, 32.978834))
      pArray.push(new BMap.Point(78.450338, 32.745921))
      pArray.push(new BMap.Point(78.30316, 32.340745))
      pArray.push(new BMap.Point(78.431941, 32.04349))
      pArray.push(new BMap.Point(78.671106, 31.572152))
      pArray.push(new BMap.Point(78.855079, 31.145879))
      pArray.push(new BMap.Point(79.425395, 30.797108))
      pArray.push(new BMap.Point(80.087697, 30.447053))
      pArray.push(new BMap.Point(81.301919, 29.855455))
      pArray.push(new BMap.Point(81.90903, 30.0157))
      pArray.push(new BMap.Point(82.7921, 29.485907))
      pArray.push(new BMap.Point(84.539843, 28.661613))
      pArray.push(new BMap.Point(85.71727, 28.124721))
      pArray.push(new BMap.Point(86.821108, 27.732537))
      pArray.push(new BMap.Point(87.998535, 27.69979))
      pArray.push(new BMap.Point(88.568851, 27.716165))
      pArray.push(new BMap.Point(88.863208, 27.108656))
      pArray.push(new BMap.Point(89.580703, 27.190949))
      pArray.push(new BMap.Point(89.654292, 27.765274))
      pArray.push(new BMap.Point(90.923705, 27.650651))
      pArray.push(new BMap.Point(91.751584, 27.223849))
      pArray.push(new BMap.Point(92.04594, 26.778874))
      pArray.push(new BMap.Point(92.965805, 26.646689))
      pArray.push(new BMap.Point(93.830478, 26.960375))
      pArray.push(new BMap.Point(94.860727, 27.453873))
      pArray.push(new BMap.Point(96.185332, 27.798001))
      pArray.push(new BMap.Point(97.123594, 27.503101))
      pArray.push(new BMap.Point(97.620321, 27.896122))
      pArray.push(new BMap.Point(97.675513, 28.059457))
      pArray.push(new BMap.Point(98.080254, 27.306056))
      pArray.push(new BMap.Point(98.595378, 27.009824))
      pArray.push(new BMap.Point(98.393008, 26.066566))
      pArray.push(new BMap.Point(97.804294, 25.483523))
      pArray.push(new BMap.Point(97.528335, 24.847254))
      pArray.push(new BMap.Point(97.417951, 24.10637))
      pArray.push(new BMap.Point(97.804294, 23.717348))
      pArray.push(new BMap.Point(98.595378, 23.886634))
      pArray.push(new BMap.Point(98.834543, 23.123105))
      pArray.push(new BMap.Point(99.239283, 22.697005))
      pArray.push(new BMap.Point(99.165694, 22.303805))
      pArray.push(new BMap.Point(99.386462, 21.857966))
      pArray.push(new BMap.Point(100.251135, 21.445169))
      pArray.push(new BMap.Point(100.839848, 21.290063))
      pArray.push(new BMap.Point(101.704521, 21.031186))
      pArray.push(new BMap.Point(102.05407, 21.152053))
      pArray.push(new BMap.Point(101.998878, 21.582901))
      pArray.push(new BMap.Point(101.962083, 22.132497))
      pArray.push(new BMap.Point(102.587591, 22.355156))
      pArray.push(new BMap.Point(103.599443, 22.338041))
      pArray.push(new BMap.Point(104.482513, 22.560368))
      pArray.push(new BMap.Point(105.383981, 22.799392))
      pArray.push(new BMap.Point(106.083078, 22.59454))
      pArray.push(new BMap.Point(106.469421, 22.286683))
      pArray.push(new BMap.Point(106.874162, 21.754879))
      pArray.push(new BMap.Point(107.315697, 21.514051))
      pArray.push(new BMap.Point(107.812424, 21.410715))
      pArray.push(new BMap.Point(107.775629, 21.134792))
      pArray.push(new BMap.Point(106.929353, 20.269201))
      pArray.push(new BMap.Point(106.175064, 19.17158))
      pArray.push(new BMap.Point(106.377435, 18.470789))
      pArray.push(new BMap.Point(107.297299, 17.23746))
      pArray.push(new BMap.Point(109.008248, 15.675143))
      pArray.push(new BMap.Point(109.688948, 13.705222))
      pArray.push(new BMap.Point(109.652153, 11.664031))
      pArray.push(new BMap.Point(108.750686, 9.571001))
      pArray.push(new BMap.Point(108.198767, 6.876803))
      pArray.push(new BMap.Point(108.493124, 5.090099))
      pArray.push(new BMap.Point(109.817729, 3.612656))
      pArray.push(new BMap.Point(111.10554, 3.298351))
      pArray.push(new BMap.Point(114.71141, 5.514272))
      pArray.push(new BMap.Point(116.256783, 7.556636))
      pArray.push(new BMap.Point(118.758815, 10.883133))
      pArray.push(new BMap.Point(119.531502, 13.669242))
      pArray.push(new BMap.Point(119.494707, 16.617614))
      pArray.push(new BMap.Point(120.414572, 18.961654))
      pArray.push(new BMap.Point(121.51841, 20.633358))
      pArray.push(new BMap.Point(122.751029, 22.303805))
      pArray.push(new BMap.Point(123.247756, 23.378111))
      pArray.push(new BMap.Point(124.811526, 25.68375))
      pArray.push(new BMap.Point(126.577667, 25.900278))
      pArray.push(new BMap.Point(127.479134, 26.67975))
      pArray.push(new BMap.Point(128.454191, 28.189945))
      pArray.push(new BMap.Point(128.766945, 29.93561))
      pArray.push(new BMap.Point(128.73015, 31.650877))
      pArray.push(new BMap.Point(127.957464, 32.153119))
      pArray.push(new BMap.Point(127.221572, 32.745921))
      pArray.push(new BMap.Point(127.019202, 33.596907))
      pArray.push(new BMap.Point(125.988953, 33.827543))
      pArray.push(new BMap.Point(125.731391, 34.546135))
      pArray.push(new BMap.Point(125.878569, 35.454458))
      pArray.push(new BMap.Point(125.731391, 36.634799))
      pArray.push(new BMap.Point(125.80498, 37.51927))
      pArray.push(new BMap.Point(124.425183, 37.972159))
      pArray.push(new BMap.Point(124.498772, 38.58128))
      pArray.push(new BMap.Point(125.013896, 39.242487))
      pArray.push(new BMap.Point(124.590758, 39.471014))
      pArray.push(new BMap.Point(124.296402, 39.840762))
      pArray.push(new BMap.Point(124.388388, 40.081441))
      pArray.push(new BMap.Point(124.940307, 40.335346))
      pArray.push(new BMap.Point(125.731391, 40.630357))
      pArray.push(new BMap.Point(126.448885, 40.96591))
      pArray.push(new BMap.Point(126.798434, 41.493704))
      pArray.push(new BMap.Point(127.111188, 41.410654))
      pArray.push(new BMap.Point(127.883875, 41.271998))
      pArray.push(new BMap.Point(128.490985, 41.452192))
      pArray.push(new BMap.Point(128.307012, 41.879854))
      pArray.push(new BMap.Point(128.950918, 41.921089))
      pArray.push(new BMap.Point(129.484439, 42.12686))
      pArray.push(new BMap.Point(129.999564, 42.549994))
      pArray.push(new BMap.Point(130.073153, 42.807915))
      pArray.push(new BMap.Point(130.404304, 42.495557))
      pArray.push(new BMap.Point(130.77225, 42.359256))
      pArray.push(new BMap.Point(130.698661, 42.726583))
      pArray.push(new BMap.Point(131.195388, 42.848541))
      pArray.push(new BMap.Point(131.360964, 43.494895))
      pArray.push(new BMap.Point(131.342566, 44.491021))
      pArray.push(new BMap.Point(131.820896, 45.002351))
      pArray.push(new BMap.Point(132.998323, 44.976239))
      pArray.push(new BMap.Point(133.623831, 45.599605))
      pArray.push(new BMap.Point(134.102161, 46.394582))
      pArray.push(new BMap.Point(134.37812, 47.228226))
      pArray.push(new BMap.Point(134.874847, 47.851127))
      pArray.push(new BMap.Point(134.985231, 48.233588))
      pArray.push(new BMap.Point(135.13241, 48.454352))
      pArray.push(new BMap.Point(135.077218, 48.474352))

      //添加遮蔽层
      var plyall = new BMap.Polygon(pArray, {
        strokeOpacity: 1,
        strokeColor: '#f8f8f8',
        strokeWeight: 1,
        fillColor: '#f8f8f8',
        fillOpacity: 1
      }) //建立多边形覆盖物
      this.map.addOverlay(plyall)
      //添加遮蔽层
      pStart = new BMap.Point(180, 90)
      pEnd = new BMap.Point(0, -90)
      pArray = [
        new BMap.Point(135.077218, 48.454352),
        new BMap.Point(pStart.lng, pStart.lat),
        new BMap.Point(pStart.lng, pEnd.lat),
        new BMap.Point(135.077218, 48.454352)
      ]
      var sanjiaoxing = new BMap.Polygon(pArray, {
        strokeOpacity: 1,
        strokeColor: '#f8f8f8',
        strokeWeight: 1,
        fillColor: '#f8f8f8',
        fillOpacity: 1
      }) //建立多边形覆盖物
      this.map.addOverlay(sanjiaoxing)
    },
    // 选中地图所有设备
    checkAllDevice () {
      let that = this
      that.circlesendDev.cardList = []
      that.isDevfIsOnline = []
      this.isDevqiehuan = false
      this.isPro = -1
      if (!this.isprovinAll) {
        this.isprovinAll = true
        var bdary = new BMap.Boundary()
        for (let i = 0; i < that.proName.length; i++) {
          that.ply.push([])
          bdary.get(that.proName[i], function (rs) {
            //获取行政区域
            that.ddp[i] = rs.boundaries.length //行政区域的点有多少个
            for (var j = 0; j < that.ddp[i]; j++) {
              that.ply[i][j] = new BMap.Polygon(rs.boundaries[j], {
                strokeWeight: 3,
                strokeColor: '#ff0000'
              }) //建立多边形覆盖物
              that.map.addOverlay(that.ply[i][j]) //添加覆盖物
              that.ply[i][j].hide() //调整视野
            }
          })
        }
      }
      if (this.isCheckedDev) {
        that.zongshu = 0
        that.zaixian = 0
        this.isDevpanduan = false
        this.isprovinOnly = false
        for (let i = 0; i < that.markers.length; i++) {
          that.zongshu++
          if (that.isLixian == true) {
            that.circlesendDev.cardList.push(that.markers[i].fNumber)
            that.isDevfIsOnline.push(that.markers[i].fIsOnline)
          } else {
            if (that.markers[i].fIsOnline == 1) {
              that.circlesendDev.cardList.push(that.markers[i].fNumber)
              that.isDevfIsOnline.push(that.markers[i].fIsOnline)
            }
          }
          if (that.markers[i].fIsOnline == 1) {
            that.zaixian++
          }
        }
        this.checkedCities = this.circlesendDev.cardList
        this.checkAll = true
        this.show = false
        this.zaixian = 0
        this.zongshu = 0
        this.getWordCnt(this.markers)
        for (let i = 0; i < that.proName.length; i++) {
          for (var j = 0; j < that.ddp[i]; j++) {
            that.ply[i][j].show() //调整视野
          }
        }
        this.zongshu = this.markers.length
        for (let i = 0; i < this.markers.length; i++) {
          if (this.markers[i].fIsOnline == 1) {
            this.zaixian++
          }
        }
        this.current_zoom = 5
      } else {
        for (let i = 0; i < that.proName.length; i++) {
          for (var j = 0; j < that.ddp[i]; j++) {
            that.ply[i][j].hide() //调整视野
          }
        }
        this.checkedCities = []
        this.checkAll = false
      }
    },
    // 侧边隐藏框移入事件
    baiduMapOver () {
      this.scrolls = false
    },
    // 侧边隐藏框移出事件
    baiduMapOut () {
      this.scrolls = true
    },
    // 侧边隐藏框移入事件
    baiduMapOverBox () {
      this.scrolls1 = false
    },
    // 侧边隐藏框移出事件
    baiduMapOutBox () {
      this.scrolls1 = true
    },
    // 初始化地图数据
    allmapData () {
      return new Promise((resolve, reject) => {
        let arrData = []
        mapMarker(this.quer2).then(res => {
          let that = this
          arrData = res.data
          for (let i = 0; i < arrData.length; i++) {
            if (
              arrData[i].fLongitude == ' ' ||
              arrData[i].fLongitude == null ||
              arrData[i].fLongitude == 0
            ) {
            } else {
              this.allGpsData.push(arrData[i])
            }
          }
          let temp = []
          if (this.allGpsData.length > 0 && this.allGpsData[0] !== null) {
            // 新坐标点
            this.allGpsData.map(item => {
              return temp.push(new BMap.Point(item.fLongitude, item.fLatitude))
            })
          }
          // 百度地图坐标转换一次最多支持10个，需要将数据分割成二维数组形式，我这里写9个一组
          const num = 10
          // Math.ceil()  “向上取整”， 即小数部分直接舍去，并向正数部分进1
          const parts = Math.ceil(temp.length / num)
          const newArr = []
          for (let i = 0; i <= parts; i++) {
            if (i * num >= temp.length) {
              break
            }
            newArr.push(temp.slice(i * num, (i + 1) * num))
          }
          resolve(newArr)
        })
      }).then(res => {
        // 转换百度坐标
        this.ssd = res
      })
    },
    // 批量转换gprs坐标
    converMap (arr, i, convertor) {
      return new Promise((resolve, reject) => {
        // 转换方法convertor.translate(要转换的值,1,5,回调函数)
        convertor.translate(this.ssd[i], 1, 5, data => {
          arr.push(data.points)
          resolve(arr)
        })
      })
    },
    //设备地图范围小窗口的显示隐藏
    devListShow () {
      this.devList = !this.devList
    },
    // 所有坐标集中到一个数组
    async transformGps () {
      let arr = []
      var convertor = new BMap.Convertor()
      for (let i = 0; i < this.ssd.length; i++) {
        await this.converMap(arr, i, convertor)
      }
      this.ponArr = [].concat.apply([], arr)
    },
    // 查询节目列表
    getProgramList () {
      this.isShows = true
      programs(this.queryParams).then(response => {
        if (response.code == 200) {
          this.userList = response.rows
          this.total = response.total
        }
      })
    },
    async getProName () {
      for (let i = 0; i < this.allGpsData.length; i++) {
        let ddp = JSON.parse(JSON.stringify(this.newMarkerObj))
        ddp.position = this.ponArr[i]
        ddp.fIsOnline = this.allGpsData[i].fIsOnline
        ddp.fNumber = this.allGpsData[i].fNumber
        ddp.deptId = this.allGpsData[i].deptId
        this.zongshu = this.allGpsData.length
        if (this.allGpsData[i].fIsOnline == 1) {
          this.zaixian++
        }
        this.markers.push(ddp)
      }
      let geo = new BMap.Geocoder()
      let arr = []
      for (let i = 0; i < this.markers.length; i++) {
        await this.getGenLocation(geo, i, arr)
      }
      this.markers = [].concat.apply([], arr)
    },
    getGenLocation (geo, i, arr) {
      return new Promise((resolve, reject) => {
        let that = this
        geo.getLocation(that.markers[i].position, function (rs) {
          that.markers[i].province = rs.addressComponents.province
          that.markers[i].city = rs.addressComponents.city
          that.markers[i].district = rs.addressComponents.district
          arr.push(that.markers[i])
          resolve(arr)
        })
      })
    },
    // 监听部门改变时的节目列表
    currDeptChange (val) {
      if (val == null || val == undefined || val == '') {
        return
      }
      if (this.proName) {
        for (let i = 0; i < this.proName.length; i++) {
          for (var j = 0; j < this.ddp[i]; j++) {
            this.ply[i][j].hide() //调整视野
          }
        }
      }
      this.loading = true
      this.show = false
      this.oneProvince = undefined
      this.twoCity = undefined
      this.threeDistrict = undefined
      this.allGpsData = []
      this.markers = []
      this.zaixian = 0
      this.zongshu = 0
      ;(this.circlesendDev = {
        cardList: [],
        idList: [],
        command: 193
      }),
        (this.sendConfig = {
          cardList: [],
          idList: [],
          command: 193
        }),
        (this.isDevfIsOnline = [])
      this.queryParams.deptId = val
      this.quer2.deptId = val
      this.isShow = false
      this.allDev = 0
      this.activeDev = 0
      this.getProgramList() //查询节目列表
      this.getDevList() //查询设备列表
      this.checkedBranch()
    },
    // 根据所选部门查询设备数据
    async checkedBranch () {
      await this.allmapData()
      await this.transformGps()
      await this.getProName()
      this.zaixian = 0
      this.zongshu = 0
      this.getWordCnt(this.markers)
      this.proNum = Object.values(this.newAlldata)
      this.proName = Object.keys(this.newAlldata)
      this.zongshu = this.markers.length
      for (let i = 0; i < this.markers.length; i++) {
        if (this.markers[i].fIsOnline == 1) {
          this.zaixian++
        }
      }
      this.loading = false
      this.checkAllDevice()
      this.checkAllDevice()
    },
    // 时间过期标红提示
    tableRowClassName ({ row, rowIndex }) {
      const nowDate = new Date()
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      const newmonth = date.month >= 10 ? date.month : '0' + date.month
      const day = date.date >= 10 ? date.date : '0' + date.date
      let updateTime = parseInt(date.year + newmonth + day)
      let endTime = parseInt(row.endTime.replace(/-/g, ''))
      if (updateTime == endTime - 1 || updateTime == endTime) {
        return 'warning-row'
      } else if (updateTime > endTime) {
        return 'success-row'
      } else {
        return ''
      }
      return ''
    },
    // 在线离线不同颜色显示
    renderContent (h, { node, data, store }) {
      {
        {
          if (data.isOnline == 0) {
            return <span style='color:red'> {node.label} </span>
          } else if (data.isOnline == 1) {
            return <span style='color:#228B22'> {node.label} </span>
          } else {
            return <span style='color:#000000'> {node.label} </span>
          }
        }
      }
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.pId)
      this.cards = selection.map(item => item.pNo)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.sendShow = !selection.length
    },
    // 获取部门列表
    // maptreeselects() {
    // 	treeselects().then(
    // 		res => {
    // 			this.mapTreeData = res.data
    // 			this.quer2.deptId = res.data[0].id
    // 			this.form.deptId = res.data[0].id
    // 		}
    // 	)
    // },
    // 获取设备列表
    getDevList () {
      getDev(this.quer2).then(res => {
        this.cardList = res.data
        if (this.allDev == 0) {
          this.forDevTree(this.cardList)
        }
      })
    },
    // 递归获取设备数量
    forDevTree (obj) {
      for (let i = 0; i < obj.length; i++) {
        if (obj[i].id.length > 8) {
          this.allDev++
          if (obj[i].isOnline == 1) {
            this.activeDev++
          }
        }
        if (obj[i].children) {
          this.forDevTree(obj[i].children)
        }
      }
    },
    // 发送节目设备下拉树
    filterNodes (value, data) {
      if (!value && !this.isSearch) return true
      return data.label.indexOf(value) !== -1
    },
    // 删除节点方法
    deletedId (data) {
      var newTree = data.filter(x => x.isOnline != 0)
      newTree.forEach(
        x => x.children && (x.children = this.deletedId(x.children))
      )
      return newTree
    },
    // 选择节目
    getProgram () {
      this.isprogramShow = false
    },
    // 选择节目显示与隐藏
    programShow () {
      this.isprogramShow = !this.isprogramShow
      if (this.userList == null) {
        this.getProgramList() //查询节目列表
      }
    },
    // 节目发送1
    sendProgram () {
      this.sendConfig.idList = this.ids
      this.sendConfig.cardList = []
      this.$refs.tree2.getCheckedNodes(true).forEach(item => {
        if (item.id.length > 8) {
          this.sendConfig.cardList.push(item.id)
        }
      })
      if (this.sendConfig.cardList.length == 0) {
        this.$message.error('请选择设备')
      } else if (this.sendConfig.idList.length == 0) {
        this.$message.error('请选择节目')
      } else {
        this.$confirm('是否确认根据所选设备发送节目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$refs.tree2.setCheckedKeys([])
            programsSend(this.sendConfig).then(res => {
              if (res.code == 200) {
                this.$refs.multipleTable.clearSelection()
                this.$message.success(res.msg)
              } else {
                this.$message.error(res.msg)
              }
            })
          })
          .catch(() => {
            this.$message({
              showClose: true,
              type: 'info',
              message: '已取消发送'
            })
          })
      }
    },
    // 节目发送2
    sendProgramTwo () {
      this.circlesendDev.idList = this.ids
      if (this.checkedCities.length == 0) {
        this.$message.error('请选择设备')
      } else if (this.circlesendDev.idList.length == 0) {
        this.$message.error('请选择节目')
      } else {
        this.$confirm('是否确认根据所选范围发送节目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            programsSend({
              idList: this.circlesendDev.idList,
              command: 193,
              cardList: this.checkedCities
            }).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg)
              } else {
                this.$message.error(res.msg)
              }
            })
          })
          .catch(() => {
            this.$message({
              showClose: true,
              type: 'info',
              message: '已取消发送'
            })
          })
      }
    },
    handleShebeiClick (data) {
      // console.log(data)
    },
    // 设备列表
    handleChange (val) {
      // console.log(val);
    },
    // 是否展开工具组件
    Unfold () {
      this.isUnfold = !this.isUnfold
      if (this.cardList == undefined) {
        this.getDevList()
      }
    },
    // 分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
    },
    getLocationPoint (point, index) {
      let that = this
      this.indexs = index
      for (let i = 0; i < that.proName.length; i++) {
        for (var j = 0; j < that.ddp[i]; j++) {
          that.ply[i][j].hide()
        }
      }
      this.isprovinOnly = true
      this.isCheckedDev = false
      this.isDevqiehuan = true
      this.isPro = -1
      this.points = point
      this.circlePath.center = point
      this.map.panTo(point)
      this.getDevData()
    },
    // 获取设备数据
    getDevData () {
      let that = this
      this.circlesendDev.cardList = []
      this.isDevfIsOnline = []
      if (this.points) {
        this.geocProvince = new BMap.Geocoder()
        if (this.current_zoom >= 5 && this.current_zoom < 7) {
          this.isMarkerShow = true
          this.geocProvince.getLocation(this.points, function (rs) {
            var addComp = rs.addressComponents
            that.oneProvince = addComp.province
            that.named = '省份'
            that.nameAddress = addComp.province
            that.zongshu = 0
            that.zaixian = 0
            if (!that.isShow) {
              that.isShow = true
            }
            that.show = true
            for (let i = 0; i < that.markers.length; i++) {
              if (that.markers[i].province == addComp.province) {
                that.zongshu++
                if (that.isLixian == true) {
                  that.circlesendDev.cardList.push(that.markers[i].fNumber)
                  that.isDevfIsOnline.push(that.markers[i].fIsOnline)
                } else {
                  if (that.markers[i].fIsOnline == 1) {
                    that.circlesendDev.cardList.push(that.markers[i].fNumber)
                    that.isDevfIsOnline.push(that.markers[i].fIsOnline)
                  }
                }
              }
              if (
                that.markers[i].fIsOnline == 1 &&
                that.markers[i].province == addComp.province
              ) {
                that.zaixian++
              }
            }
            that.checkedCities = that.circlesendDev.cardList
            that.checkAll = true
          })
        } else if (this.current_zoom >= 7 && this.current_zoom < 10) {
          this.isMarkerShow = true
          this.geocProvince.getLocation(this.points, function (rs) {
            var addComp = rs.addressComponents
            that.oneProvince = addComp.city
            that.named = '城市'
            that.nameAddress = addComp.city
            that.zongshu = 0
            that.zaixian = 0
            if (!that.isShow) {
              that.isShow = true
            }
            that.show = true
            for (let i = 0; i < that.markers.length; i++) {
              if (that.markers[i].city == addComp.city) {
                that.zongshu++
                if (that.isLixian == true) {
                  that.circlesendDev.cardList.push(that.markers[i].fNumber)
                  that.isDevfIsOnline.push(that.markers[i].fIsOnline)
                } else {
                  if (that.markers[i].fIsOnline == 1) {
                    that.circlesendDev.cardList.push(that.markers[i].fNumber)
                    that.isDevfIsOnline.push(that.markers[i].fIsOnline)
                  }
                }
              }
              if (
                that.markers[i].fIsOnline == 1 &&
                that.markers[i].city == addComp.city
              ) {
                that.zaixian++
              }
            }
            that.checkedCities = that.circlesendDev.cardList
            that.checkAll = true
          })
        } else if (this.current_zoom >= 10 && this.current_zoom < 13) {
          this.isMarkerShow = true
          this.geocProvince.getLocation(this.points, function (rs) {
            var addComp = rs.addressComponents
            that.oneProvince = addComp.district
            that.named = addComp.district ? '区县' : '城市'
            that.nameAddress = addComp.district
              ? addComp.district
              : addComp.city
            that.zongshu = 0
            that.zaixian = 0
            if (!that.isShow) {
              that.isShow = true
            }
            that.show = true
            if (!that.circleShow) {
              for (let i = 0; i < that.markers.length; i++) {
                if (that.markers[i].district == that.nameAddress) {
                  that.zongshu++
                  if (that.isLixian == true) {
                    that.circlesendDev.cardList.push(that.markers[i].fNumber)
                    that.isDevfIsOnline.push(that.markers[i].fIsOnline)
                  } else {
                    if (that.markers[i].fIsOnline == 1) {
                      that.circlesendDev.cardList.push(that.markers[i].fNumber)
                      that.isDevfIsOnline.push(that.markers[i].fIsOnline)
                    }
                  }
                }
                if (
                  that.markers[i].fIsOnline == 1 &&
                  that.markers[i].district == that.nameAddress
                ) {
                  that.zaixian++
                }
              }
              that.checkedCities = that.circlesendDev.cardList
              that.checkAll = true
            } else {
              that.map.removeOverlay(that.circles)
              that.getCircle()
            }
          })
        } else if (this.current_zoom >= 13) {
          this.isMarkerShow = false
          this.geocProvince.getLocation(this.points, function (rs) {
            var addComp = rs.addressComponents
            that.named = addComp.street ? '街道' : '区县'
            that.nameAddress = addComp.street
              ? addComp.street
              : addComp.district
            if (!that.isShow) {
              that.isShow = true
            }
            that.show = true
          })
          if (this.circleShow) {
            this.map.removeOverlay(this.circles)
            this.getCircle()
          } else {
            that.checkedCities = []
            that.checkAll = false
          }
        }
      }
    },
    //地图设备总数与在线的切换
    checkeds (val) {
      let that = this
      this.show = false
      if (val == 1) {
        this.isLixian = true
      } else if (val == 2) {
        this.isLixian = false
      }
      if (this.circleShow) {
        this.map.removeOverlay(this.circles)
        this.getCircle()
      } else {
        if (this.isCheckedDev) {
          that.circlesendDev.cardList = []
          that.isDevfIsOnline = []
          that.zongshu = 0
          that.zaixian = 0
          for (let i = 0; i < that.markers.length; i++) {
            that.zongshu++
            if (that.isLixian == true) {
              that.circlesendDev.cardList.push(that.markers[i].fNumber)
              that.isDevfIsOnline.push(that.markers[i].fIsOnline)
            } else {
              if (that.markers[i].fIsOnline == 1) {
                that.circlesendDev.cardList.push(that.markers[i].fNumber)
                that.isDevfIsOnline.push(that.markers[i].fIsOnline)
              }
            }
            if (that.markers[i].fIsOnline == 1) {
              that.zaixian++
            }
          }
          that.checkedCities = that.circlesendDev.cardList
          that.checkAll = true
        } else if (this.isDevqiehuan) {
          this.getDevData()
        }
      }
    },
    // 设备列表总数与在线的切换
    checkedsDev (val) {
      if (val == 1) {
        this.getDevList()
      } else if (val == 2) {
        this.cardList = this.deletedId(this.cardList)
      }
    },
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    },
    // 鼠标双击marker事件
    renderLevelTwoMapdd ({ type, target, pixel, point }) {
      this.show = false
      //设置所有覆盖物均可清除
      this.circlePath.center = point
      this.setAllOverLayClear(this.map)
      if (this.current_zoom >= 5 && this.current_zoom < 7) {
        this.current_zoom = this.ZOOM_CITY_LEVEL
        this.map.centerAndZoom(point, this.current_zoom)
      } else if (this.current_zoom >= 7 && this.current_zoom < 10) {
        this.current_zoom = this.ZOOM_DISTRICT_LEVEL
        this.map.centerAndZoom(point, this.current_zoom)
      } else if (this.current_zoom >= 10 && this.current_zoom < 13) {
        this.current_zoom = this.ZOOM_STREET_LEVEL
        this.map.centerAndZoom(point, this.current_zoom)
      } else if (this.current_zoom >= 13) {
        this.bgcColor[2] = ''
        this.current_zoom = this.ZOOM_MAX_LEVEL
        this.map.centerAndZoom(point, this.current_zoom)
      }
    },
    getWordCnt (arr) {
      let arrData = arr
      let obj = {}
      for (let i = 0; i < arrData.length; i++) {
        var item = arrData[i].province // a为计算的属性,可换成b,c
        obj[item] = obj[item] + 1 || 1
      }
      this.newAlldata = obj
    },
    handler ({ BMap, map }) {
      this.map = map
      this.BMap = BMap
      // 初始化地图
      if (this.isCreatWatch) {
        this.drawBoundary()
        this.currDeptChange(this.$store.state.deptId)
      }
      let point = new BMap.Point(108, 36)
      map.centerAndZoom(point, this.current_zoom) //创建中心点与zoom缩放级别
      map.setMinZoom(this.ZOOM_PROVINCE_LEVEL) //最小zoom缩放级别
      map.setMaxZoom(this.ZOOM_MAX_LEVEL) //最大zoom缩放级别
      map.disableScrollWheelZoom() //关闭鼠标滚轮缩放，自定义滚轮事件，调用map.zoomIn()与map.zoomOut()来控制缩放，避免直接使用而导致一次放大或缩小几级导致数据加载问题
      this.bindZoomSwithListener(map) //初始化zoom缩放监听事件
    },
    //清除覆盖物
    removeOverlay (map) {
      map.clearOverlays()
    },
    //设置所有覆盖物为可清除
    setAllOverLayClear (map) {
      let allOverlay = map.getOverlays()
      for (let overlay of allOverlay) {
        overlay.enableMassClear()
      }
    },
    // 设备列表的显示隐藏
    deviceShow () {
      this.isDevice = !this.isDevice
      this.show = false
    },
    // 自定义滚动事件
    bindZoomSwithListener (map) {
      let that = this
      let flag = true
      const scrollFunc = e => {
        if (flag && this.scrolls && this.scrolls1) {
          flag = false
          setTimeout(function () {
            //是否放大
            let isUp = false
            //IE/Opera/Chrome 的滚轮判断为wheelDelta = +- 120 ，firefox的滚轮判断为detail = +- 3
            //+120为放大，-120为缩小 -3为放大，+3为缩小
            if (e.wheelDelta) {
              if (e.wheelDelta == 120) {
                isUp = true
                that.map.zoomIn()
              } else {
                that.map.zoomOut()
              }
            } else if (e.detail) {
              //Firefox
              if (e.detail == -3) {
                isUp = true
                that.map.zoomIn()
              } else {
                that.map.zoomOut()
              }
            }
            //从一级跳二级
            if (isUp && that.current_zoom == that.ZOOM_CITY_LEVEL - 1) {
              that.current_zoom = 7
            }
            //从二级跳一级
            else if (!isUp && that.current_zoom == that.ZOOM_CITY_LEVEL) {
              that.current_zoom = 5
            }
            //从二级跳三级
            else if (
              isUp &&
              that.current_zoom == that.ZOOM_DISTRICT_LEVEL - 1
            ) {
              that.current_zoom = 10
            }
            //从三级跳二级
            else if (!isUp && that.current_zoom == that.ZOOM_DISTRICT_LEVEL) {
              that.current_zoom = 7
            }
            //从三级跳四级
            else if (isUp && that.current_zoom == that.ZOOM_STREET_LEVEL - 1) {
              that.current_zoom = 13
            }
            //从四级跳三级
            else if (!isUp && that.current_zoom == that.ZOOM_STREET_LEVEL) {
              that.current_zoom = 10
            } else {
              that.map.removeOverlay()
            }
            if (that.current_zoom < 10) {
              that.map.removeOverlay(that.circles)
              that.gps = -1
              that.circleShow = false
            }
            if (isUp) {
              that.current_zoom = that.map.getZoom()
            } else {
              that.current_zoom = that.map.getZoom()
            }
            that.map.centerAndZoom(that.points, that.current_zoom)
            flag = true
          }, 200)
        }
      }
      /*注册事件*/
      let userAgent = navigator.userAgent
      let isFF = userAgent.indexOf('Firefox') > -1 //判断是否Firefox浏览器
      if (isFF) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false)
      } else {
        window.onmousewheel = document.onmousewheel = scrollFunc //IE/Opera/Chrome
      }
    },
    //选择查看范围GPS
    gpsBtn (index) {
      if (this.current_zoom >= 10) {
        this.map.removeOverlay(this.circles)
        this.gps = index
        this.circlePath.radius = (index + 1) * 10000
        this.circleShow = true
        this.getCircle()
      } else {
        this.$alert('<strong>当前比例太大，无法选择</strong>', '提示', {
          dangerouslyUseHTMLString: true
        })
      }
    },
    // 画圆函数
    getCircle () {
      this.circlesendDev.cardList = []
      this.isDevfIsOnline = []
      this.circles = new BMap.Circle(
        this.circlePath.center,
        this.circlePath.radius,
        {
          fillColor: 'blue',
          strokeWeight: 1,
          fillOpacity: 0.2,
          strokeOpacity: 0.2
        }
      )
      this.map.addOverlay(this.circles)
      let num = 0
      let sum = 0
      for (let i = 0; i < this.markers.length; i++) {
        let result = BMapLib.GeoUtils.isPointInCircle(
          this.markers[i].position,
          this.circles
        )
        if (result == true) {
          sum++
          if (this.isLixian == true) {
            this.circlesendDev.cardList.push(this.markers[i].fNumber)
            this.isDevfIsOnline.push(this.markers[i].fIsOnline)
          } else {
            if (this.markers[i].fIsOnline == 1) {
              this.circlesendDev.cardList.push(this.markers[i].fNumber)
              this.isDevfIsOnline.push(this.markers[i].fIsOnline)
            }
          }
          this.checkedCities = this.circlesendDev.cardList
          this.checkAll = true
          if (this.markers[i].fIsOnline == 1) {
            num++
          }
          this.zongshu = sum
          this.zaixian = num
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

::v-deep#container {
  width: 100%;
  height: 100%;
  position: relative;
  .unfold {
    position: absolute;
    right: 8px;
    padding: 0 5px;
    cursor: pointer;
    background-color: #9fd7fc;
    border: 1px solid gray;
    i {
      color: orangered;
      font-weight: 900;
      font-size: 15px;
      margin-top: 2px;
    }
  }
  .el-table .success-row {
    color: red !important;
  }
  .el-table .warning-row {
    color: #ebb563 !important;
  }
  .map {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .devList-top {
    height: 2rem;
    display: flex;
    z-index: 999;
    position: absolute;
    align-items: center;

    span {
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      margin-left: 20px;
    }

    // .el-col {
    // 	width: 300px;
    // 	height: 40px;
    // 	margin-left: 20px;
    // }
  }

  .programBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 530px;
    height: 430px;
    border-radius: 5px;
    overflow: hidden;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.5);

    &.active {
      height: 2.2rem;
    }

    .program-top {
      height: 2rem;
      display: flex;
      align-items: center;
      padding: 3px;
      background-color: rgba(0, 0, 0, 0.5);

      span {
        color: #fff;
        font-weight: 700;
        margin-left: 20px;
      }

      .el-col {
        width: 300px;
        margin-left: 20px;
      }
    }
  }

  .tools {
    width: 320px;
    position: absolute;
    right: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.7rem 0.2rem;
    border-radius: 0.25rem;
    font-size: 14px;
    &.active {
      height: 2.2rem;
      overflow: hidden;
    }
    .head {
      color: #fff;
      font-size: 12px;
      position: relative;

      label.el-radio {
        color: #fff;
      }

      .top {
        height: 15px;
        margin-top: -5px;
        padding: 0 10px;
      }

      .searchs {
        margin-top: 5px;
        padding: 0 10px;
      }

      .description {
        display: flex;
        padding: 8px 0 3px;
        justify-content: space-around;
      }

      .bottom {
        opacity: 0.8;

        hr:nth-of-type(1) {
          margin-bottom: 5px;
        }

        hr:nth-of-type(2) {
          margin-top: 5px;
        }
      }

      .mytree {
        margin-top: 10px;
        .el-tree {
          padding: 10px;
          font-size: 13px;
          background-color: rgba(0, 0, 0, 0);
          // color: #fe8441;
          .el-tree-node {
            height: 100%;
            .el-tree-node__content {
              height: 18px;
            }
          }
        }

        .el-button {
          position: absolute;
          bottom: 0;
          left: 10px;
          padding: 8px;
          width: 140px;
          font-size: 14px;
          font-weight: 700;

          &:nth-of-type(2) {
            left: 155px;
          }
        }
      }
    }
  }

  #deviceBox {
    position: absolute;
    overflow: hidden;
    left: 2px;
    bottom: 0px;
    border: 1px solid lightgray;
    width: 440px;
    height: 232px;
    font-size: 12px;
    color: #000000;
    border-radius: 5px;
    background-color: rgba(237, 245, 255, 0.9);
    box-shadow: 0 0 2px 2px gray;

    .topDevice {
      padding: 5px;
      border-bottom: 1px solid #cccccc;

      span {
        margin-right: 5px;
      }

      .el-radio {
        font-size: 12px;
        color: gary;
      }
    }

    &.active {
      height: 30px;
    }

    .centerDevice {
      ul {
        display: flex;
        flex-wrap: wrap;
        padding: 2px;
        // border: 1px solid gray;
        height: 155px;
        overflow: auto;
        li {
          width: 33%;
          height: 20px;
          font-weight: 700;
          cursor: pointer;
          &:hover {
            color: gray;
          }
          &.active {
            color: #1890ff;
          }
          span {
            display: inline-block;
          }
          span:nth-of-type(1) {
            text-align: right;
            width: 100px;
          }
        }
      }
    }

    .bottomDevice {
      padding: 5px;
      width: 100%;
      border-top: 1px solid #cccccc;

      i {
        display: inline-block;
        padding: 2px 3px;
        border: 1px solid gray;
        border-radius: 5px;
        cursor: pointer;
        margin-left: 5px;
        font-weight: 700;
        font-style: normal;

        &.activeBgc {
          background-color: #4bb8ed;
          color: #fff;
        }
      }

      .el-button {
        padding: 3px 2px;
        margin-left: 10px;
      }
    }
  }

  .checkedDevList {
    position: absolute;
    right: 0;
    bottom: 0px;
    height: 232px;
    width: 420px;
    overflow: hidden;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: #494847;
    &.active {
      height: 35px;
    }
    .el-checkbox-group {
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 190px;
      justify-content: flex-start;
      text-align: center;
      .el-checkbox {
        width: 33.33%;
        color: red;
        &.activeZaixian {
          color: #00ff00;
        }
      }
    }
  }
}
</style>
